<template>
    <fieldset>
        <legend>VUe的基本过度关键帧动画</legend>
        <button v-on:click="show = !show">
            点击领取女盆友
        </button>
        <br>
        <transition name="frames">
            <img v-if="show" class="img" :src="imgSrc">

        </transition>
    </fieldset>
</template>

<script>
    export default {
        name: "Animation2",
        data: () => {
            return {
                show: true,
                imgSrc: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3621987426,796514073&fm=26&gp=0.jpg",
            }
        }
    }
</script>

<style scoped>
    fieldset {
        text-align: center;

    }

    img {
        width: 300px;
    }

    @keyframes anim {
        0% {
            opacity: 1;
            transform: scale(1, 1);
        }
        25% {
            opacity: .6;
            transform: scale(1.5, 1.5);
        }
        50% {
            opacity: .4;
            transform: scale(2, 2);
        }
        75% {
            opacity: 0.2;
            transform: scale(1.5, 1.5);
        }
        100% {
            opacity: 0;
            transform: scale(1, 1);
        }
    }
    .frames-leave-active{
        animation: anim 2s linear;
    }
    .frames-enter-active{
        animation: anim 3s reverse linear;
    }
</style>